<template>
	<view @click="handleSelect" class="bg-white flex-row"
		style="height: 60px;width: 100%;margin-top: 10px;justify-content: space-between;">
		<image :src="form.value.avatarUrl?imgURL2+form.value.avatarUrl:imgURL3+'shop/cloth.png'"
			style="height: 50px;width: 50px;border-radius: 50%;margin: 5px;margin-left: 15px;"></image>
		<view style="margin-top: 18px;">
			<uni-icons type="right" size="20" color="#8E8E8E"></uni-icons>
		</view>
	</view>
	<view class="bg-white flex-row" style="height: 50px;width: 100%;margin-top: 2px;justify-content: space-between;">
		<view style="height: 100%;display: flex;align-items: center;margin-left: 15px;">
			昵称
		</view>
		<view style="margin-top: 15px;display: flex;">
			<input v-model="form.value.nickName" dir="rtl" type="text" style="text-align: right;" />
			<uni-icons type="right" size="20" color="#8E8E8E"></uni-icons>
		</view>
	</view>
	<view class="bg-white flex-row" style="height: 50px;width: 100%;margin-top: 2px;justify-content: space-between;">
		<view style="height: 100%;display: flex;align-items: center;margin-left: 15px;">
			手机号
		</view>
		<view style="margin-top: 15px;display: flex;">
			<!-- <input v-model="form.value.account" dir="rtl" type="tel" style="text-align: right;" /> -->
			{{form.value.account}}
			<uni-icons type="right" size="20" color="#8E8E8E"></uni-icons>
		</view>
	</view>

	<view @click="editMeOk()" class="button-2 margin-top-xl" style="align-items: center;width: 90%;margin-left: 5%;">
		提交修改</view>



	<!-- 	<view class="bg-white flex-row" style="height: 50px;width: 100%;margin-top: 2px;justify-content: space-between;">
		<view style="height: 100%;display: flex;align-items: center;margin-left: 15px;">
			运营商
		</view>
		<view style="margin-top: 15px;" class="flex-row">
			<view>{{service_name}}</view>
			<uni-icons type=" right" size="20" color="#8E8E8E"></uni-icons>
		</view>
	</view> -->
	<!-- <uv-picker ref="picker" :columns="service" @confirm="service_confirm" title="请选择手机运营商"></uv-picker> -->
	<!-- 	<view class="bg-white flex-row" style="height: 50px;width: 100%;margin-top: 15px;justify-content: space-between;">
		<view style="height: 100%;display: flex;align-items: center;margin-left: 15px;">
			去实名
		</view>
		<view style="margin-top: 15px;">
			<uni-icons type="right" size="20" color="#8E8E8E"></uni-icons>
		</view>
	</view> -->
	<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" background-color="#ffffff">
		<view class="bg-white  text-df">
			<view style="text-align: right;" class="padding-xs">
				<uni-icons type="closeempty" size="20" @click="colse_pop"></uni-icons>
			</view>
			<view style="text-align: center; padding: 10rpx 60rpx 40rpx;" class="  ">
				<view class="text-bold margin-top-lg" style="">支付二维码</view>
				<view class="text-sm text-mid flex-row" style="justify-content: center;">
					<uni-icons type="close" size="18"></uni-icons>
					<view class="">未扫码</view>
				</view>
			</view>
		</view>
	</uni-popup>
	<!-- <view class="bg-white flex-row" style="height: 50px;width: 100%;margin-top: 12px;justify-content: space-between;">
		<view style="height: 100%;display: flex;align-items: center;margin-left: 15px;">
			关于我们
		</view>
		<view style="margin-top: 15px;">
			<uni-icons type="right" size="20" color="#8E8E8E"></uni-icons>
		</view>
	</view>
	<view class="bg-white flex-row" style="height: 50px;width: 100%;margin-top: 2px;justify-content: space-between;">
		<view style="height: 100%;display: flex;align-items: center;margin-left: 15px;">
			注销
		</view>
		<view style="margin-top: 15px;">
			<uni-icons type="right" size="20" color="#8E8E8E"></uni-icons>
		</view>
	</view> -->
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import { onShow, onReady } from "@dcloudio/uni-app"
	import { userinfo, editUserMsg } from '../../api/myhome/login';
	import { imgURL2, imgURL3 } from '../../api/request'
	let form = reactive({
		value: {
			nickName: '未登陆',
			text: '这个人很懒，什么都没说',
			integral: 1299,
			time: '2024-4-23',
			workhours: 568,
			role: 0,
			realNameAuthenticated: 0
		}
	});

	//选择器
	const service = ref([
		['移动', '联通', '电信']
	])

	//运营商
	const service_name = ref('')

	const picker = ref(null)

	onReady(() => {
		if (uni.getStorageSync('service_name')) {
			service_name.value = uni.getStorageSync('service_name')
		} else {
			// picker.value.open();
		}
	})

	onShow(() => {
		userinfo().then(res => {
			console.log('获取用户信息成功' + JSON.stringify(res.data));
			form.value = res.data; // 在数据完全加载后更新页面数据
			// console.log()
			form.value.nickName = form.value.nickName.slice(0, 8)

		})


	})

	const service_confirm = (e) => {
		console.log('confirm', e);
		service_name.value = e.value[0]
		uni.setStorageSync('service_name', service_name.value)
	}

	const onLogin = () => {
		uni.removeStorageSync('token')
		uni.redirectTo({
			url: '/pages/login/register'
		})
	}
	const handleSelect = () => {
		uni.chooseImage({
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
					url: 'https://api.anred.qrsk.net/applet/user/avatar', //仅为示例，非真实的接口地址
					header: { 'Authorization': uni.getStorageSync('token'), 'siteId': "100" },
					filePath: tempFilePaths[0],
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						form.value.avatarUrl = JSON.parse(uploadFileRes.data).data
						editMsg.value.avatar = JSON.parse(uploadFileRes.data).data
						uni.showToast({
							title: "头像更换成功"
						})
						console.log(JSON.parse(uploadFileRes.data), "我是恋爱脑");
					}
				});
			}
		});
	}
	//弹窗
	const popup = ref(null)
	const Integral = reactive({
		form: {}
	})
	//打开弹出
	const open_pop = () => {
		popup.value.open()
	}

	const colse_pop = () => {
		popup.value.close()
	}
	//提交修改个人信息
	const editMsg = ref({
		nickName: '',
		avatar: ''
	})
	const editMeOk = () => {
		editMsg.value.nickName = form.value.nickName
		editUserMsg(editMsg.value).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: "修改成功!",
					type: 'none',
					duration: 500
				})
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/me/me'
					})
				}, 1000)

			}
		})
	}
</script>

<style>
	page {
		background-color: #EFEFEF;
	}

	.button-2 {
		height: 40px;
		width: 220px;
		background: #EE3F4D;
		border-radius: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #fff;
	}
</style>